{php define('MUI', true);}
{template 'common/header'}
	{if $_GPC['type'] == 'record'}
	<header class="mui-bar mui-bar-nav">
		{if $_W['container'] !== 'wechat'}
		<div class="mui-row fixed-bar">
			<div class="mui-col-xs-4">
				<button class="mui-btn mui-btn-link mui-btn-nav mui-pull-left mui-action-back">
					<span class="mui-icon mui-icon-left-nav"></span>
					返回
				</button>
			</div>
			<div class="mui-col-xs-4 mui-text-center">{if !empty($title)}{$title}{elseif !empty($_W['page']['title'])}{$_W['page']['title']}{/if}</div>
			<div class="mui-col-xs-4 mui-text-right">
				<a href="#consume-date">
					<span>{if $_GPC['period'] <= 0}{php echo date('Y.m', strtotime($_GPC['period'] . 'month'))}{else}查看全部{/if}</span>
					<span class="fa fa-angle-down mui-text-muted"></span>
				</a>
			</div>
		</div>
		{else}
		<div class="mui-row fixed-bar">
			<div class="mui-col-xs-6"></div>
			<div class="mui-col-xs-6 mui-text-right">
				<a href="#consume-date">
					<span>{if $_GPC['period'] <= 0}{php echo date('Y.m', strtotime($_GPC['period'] . 'month'))}{else}查看全部{/if}</span>
					<span class="fa fa-angle-down mui-text-muted"></span>
				</a>
			</div>
		</div>
		{/if}
	</header>
	<div id="consume-date" class="mui-popover mui-popover-top">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="{php echo $this->createMobileurl('creditrecord', array('credittype' => $_GPC['credittype'], 'type' => 'record', 'period' => '1'))}">查看全部</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="{php echo $this->createMobileurl('creditrecord', array('credittype' => $_GPC['credittype'], 'type' => 'record', 'period' => '0'))}">{php echo date('Y.m', strtotime('today'))}</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="{php echo $this->createMobileurl('creditrecord', array('credittype' => $_GPC['credittype'], 'type' => 'record', 'period' => '-1'))}">{php echo date('Y.m', strtotime('-1month'))}</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="{php echo $this->createMobileurl('creditrecord', array('credittype' => $_GPC['credittype'], 'type' => 'record', 'period' => '-2'))}">{php echo date('Y.m', strtotime('-2month'))}</a>
			</li>
		</ul>
	</div>
	<div class="mui-content">
		<div class="mui-table mui-table-inline mui-pa10">
			<div class="mui-table-cell">
				<a href="{php echo $this->createMobileurl('creditrecord', array('credittype' => 'credit2', 'type' => 'record', 'period' => '1'))}" class="mui-active">余额记录</a>
				<!-- <div class="mui-text-muted ">充值</div>{$income}{if $_GPC['credittype'] == 'credit2'}元{else}积分{/if} -->
			</div>
			<div class="mui-table-cell">
				<a href="{php echo $this->createMobileurl('creditrecord', array('credittype' => 'cash', 'type' => 'record', 'period' => '1'))}">现金记录</a>
				<!-- <div class="mui-text-muted">消费</div>{$pay}{if $_GPC['credittype'] == 'credit2'}元{else}积分{/if} -->
			</div>
		</div>
		<div class="credits-display">
		<ul class="mui-table-view mui-credits">
			{loop $data $row}
			<li class="mui-table-view-cell">
				<a href="{php echo $this->createMobileurl('creditrecord', array('credittype' => $_GPC['credittype'], 'type' => 'recorddetail', 'id' => $row['id']))}">
					<div class="mui-row">
						<div class="mui-col-xs-6 mui-ellipsis-2">
							{$row['remark']}
						</div>
						<div class="mui-col-xs-6 mui-text-right">
							<span class="mui-big {if $_GPC['credittype'] != 'credit1'}mui-rmb{/if}" style="color:{php echo $row['color']}">
								<span class="money" style="color:{php echo $row['color']}">{$row['num']}</span>
							</span>
							<span class="mui-block mui-text-muted mui-small">{$row['createtime']}</span>
						</div>
					</div>
				</a>
			</li>
			{/loop}
		</ul>
		</div>
	</div>
	{/if}
	{if $_GPC['type'] == 'recorddetail'}
	<div class="mui-bg-white mc-record-detail">
		<div class="mui-bb1 mui-row sum">
			<div class="mui-col-xs-6 mui-text-muted">
				付款金额
			</div>
			<div class="mui-col-xs-6 mui-text-right">
				<span class="mui-big {if $_GPC['credittype'] != 'credit1'}mui-rmb{/if}" style="color:{php echo $row['color']}">
					<span class="money" style="color:{php echo $row['color']}">{$data['num']}</span>
				</span>
			</div>
		</div>
		<div class="detail-info">
			<div class="mui-row">
				<div class="mui-col-xs-6 mui-text-muted">
					操作人
				</div>
				<div class="mui-col-xs-6 mui-text-right mui-ellipsis">
					{if $data['username']}{$data['username']}{else}本人{/if}
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-6 mui-text-muted">
					数量
				</div>
				<div class="mui-col-xs-6 mui-text-right mui-ellipsis">
					{$data['num']}
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-6 mui-text-muted">
					当前状态
				</div>
				<div class="mui-col-xs-6 mui-text-right mui-ellipsis">
					交易成功
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-6 mui-text-muted">
					时间
				</div>
				<div class="mui-col-xs-6 mui-text-right mui-ellipsis">
					{php echo date('Y-m-d H:i:s', $data['createtime'])}
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-6 mui-text-muted">
					备注
				</div>
				<div class="mui-col-xs-6 mui-text-right">
					{$data['remark']}
				</div>
			</div>
		</div>
	</div>
	{/if}
<script>
require(['mui.pullrefresh'], function(mui) {
	mui.init();
	mui.ready(function() {
		var page = 2;
		var pagetotal = {$pagenums} + 1;
		if (page < pagetotal) {
			//循环初始化所有下拉刷新，上拉加载。
			mui.each(document.querySelectorAll('.credits-display'), function(index, pullRefreshEl) {
				mui(pullRefreshEl).pullToRefresh({
					up: {
						callback: function() {
							var self = this;
							setTimeout(function() {
								$('.mui-pull-bottom-tips').hide();
								var ul = self.element.querySelector('.mui-credits');
								ul.appendChild(createFragment(ul, index, 5));
								if (pagetotal <= page) {
									$('.mui-pull-bottom-tips').hide();
									self.endPullUpToRefresh(true);
								} else {
									self.endPullUpToRefresh(false);
								}
							}, 1000);
						}
					}
				});
			});

			var createFragment = function(ul, index, count, reverse) {
				var length = ul.querySelectorAll('li').length;
				var fragment = document.createDocumentFragment();
				var li;
				var url = "{php echo $this->createMobileurl('creditrecord', array('credittype' => $_GPC['credittype'], 'type' => $_GPC['type'], 'period' => $_GPC['period']))}";
				mui.post(url, {'page' : page}, function(data){
					data = $.parseJSON(data);
					if (data.state == 'error') {
						return false;
					}
					for (var i in data) {
						var href = "{php echo $this->createMobileurl('creditrecord', array('credittype' => $_GPC['credittype'], 'type' => 'recorddetail'))}";
						li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a href="' + href + '&id=' + data[i].id + '" ><div class="mui-row"><div class="mui-col-xs-6 mui-ellipsis-2">' + data[i].remark + '</div><div class="mui-col-xs-6 mui-text-right"><span class="mui-big mui-rmb" style="color:' + data[i].color + '"><span class="money" style="color:' + data[i].color + '">' + data[i].num + '</span></span><span class="mui-block mui-text-muted mui-small">' + data[i].createtime + '</span></div></div></a>';
						ul.appendChild(li, ul.firstChild);
					}
					$('.mui-pull-bottom-tips').show();
				});
				page++;
				return fragment;
			};
		}
	});
});
</script>
{template 'common/footer'}